
<template>
  <!-- 查看进展组件 -->
  <div>
    <div v-if="!viewProgress222">
      <div style="height: 700px; margin: 25px" v-if="!viewProgress22">
        <!-- 添加指标按钮 -->
        <div style="display:flex; width:100%; justify-content: space-between;align-items: center;">
          <div>
            <h2>{{ dataTypesTemp.templateName }}</h2>
          </div>
          <div>
            <el-button type="primary" @click="exportForm()" size="large" icon="el-icon-bottom">导 出</el-button>
          </div>
        </div>
        <!-- 表格信息 -->
        <el-row>
          <el-table :data="tableData" style="width: 100%; color: #333333; font-size: 14px" height="500" align="center"
            :header-cell-style="{ background: '#ECF1F9' }">
            <el-table-column fixed type="index" align="center" label="编号" width="60"></el-table-column>
            <el-table-column prop="userName" align="center" label="被考核人姓名" width="160"></el-table-column>
            <el-table-column prop="departmentName" align="center" label="被考核人部门" width="160"></el-table-column>

            <el-table-column prop="grade" align="center" label="绩效等级" width="160">
              <template slot-scope="scope">
                <span v-if="scope.row.grade == 1">好</span>
                <span v-if="scope.row.grade == 2">较好</span>
                <span v-if="scope.row.grade == 3">一般</span>
                <span v-if="scope.row.grade == 4">差</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="员工周报">
              <template slot-scope="scope">
                <el-button @click.native.prevent="zhouBao(scope.row)" type="text" size="small"
                  style="color:#3684e4;width:120px;text-decoration:underline;text-underline-offset:3px">查看员工周报</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="assessState" label="评估流程">
              <template slot-scope="{row}">
                <span v-for=" res in row.contentDto.processBeans">
                  <span v-if="res.userId == userIds && res.state == 1 ? true : false" style="color:#EF7045">{{ "未评估"
                  }}</span>
                  <span v-if="res.userId == userIds && res.state == 2 ? true : false">{{ '评估结束' }}</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作">
              <template slot-scope="{row}">
                <span v-for=" res in row.contentDto.processBeans">
                  <el-button v-if="res.userId == userIds && res.state == 1 && row.fillingStatus == 2 ? true : false"
                    @click.native.prevent="editRow(row)" type="text" size="small"
                    style="color: #3B95FF;width:120px;text-decoration:underline;text-underline-offset:3px">进入考评</el-button>
                  <el-button v-if="res.userId == userIds && row.fillingStatus == 1 ? true : false" :disabled="noSpell"
                    type="text" size="small" style="color: #ccc;width:120px">考核人未填报</el-button>
                  <el-button v-if="res.userId == userIds && res.state == 2 ? true : false"
                    @click.native.prevent="lookEditRow(row)" type="text" size="small"
                    style="text-decoration:underline;text-underline-offset:3px">查看</el-button>
                </span>
                <!--  v-if="row.processBeans && row.processBeans.state==1?true: false" -->
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-pagination style="text-align: right;margin-top:16px" background @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10]" :page-size="pageSize"
              layout="sizes, prev, pager, next, jumper" :total="total"></el-pagination>
          </el-row>
        </el-row>
        <!-- 返回按钮 -->
        <el-row>
          <el-button @click.prevent="nextPage" type="primary" class="nextOne" round
            style="width:165px;font-size:20px">返回</el-button>
        </el-row>
        <!-- 查看员工周报弹出框-->
        <el-dialog :title="titleType + ' - 每周工作'" :visible.sync="centerDialogVisible" width="30%" center>
          <el-card v-for="item in weeklyData" :key="item.id" style="margin-bottom:8px;">
            <div slot="header" style="height:0px;line-height:5px;background:#ccc">
              <span style="display:flex; justify-content: space-between;">
                <span>{{ item.timeName }}</span>
                <span>{{ item.createTime }}</span>
              </span>
            </div>
            <div>{{ item.content }}</div>
          </el-card>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">退出</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <viewProgress2 :personInfo1="personInfo" v-if="viewProgress22" @giveFather4="getSon"></viewProgress2>
    <lookEditRowPinggu :personInfo1="personInfo" v-if="viewProgress222" @giveFather5="getSon5"></lookEditRowPinggu>
  </div>
</template>
    
<script>
import viewProgress2 from "./viewProgress2.vue";
import lookEditRowPinggu from "./lookEditRowPinggu.vue";
import {
  getViewProgress,
  getWeekly,
  putKanBan,
  getUserId,
  getHistoryListOpenList,
  exportForms
} from "@/api2/kaohe";
import { getToken } from "@/utils/auth";
const base_url = process.env.VUE_APP_BASE_APITwo;
export default {
  components: {
    viewProgress2: viewProgress2,
    lookEditRowPinggu: lookEditRowPinggu
  },
  props: ["dataTypes"],
  data() {
    return {
      ruleForm1: {
        level: "",
        levels: "", //调整考核等级
        contents: "" //调整说明
      },
      viewProgress22: false,
      viewProgress222: false,
      noSpell: true,
      grades: "",
      grades1: "",
      neiRongList: "",
      getHistoryData: [],
      jixiaoData: [],
      jixiaoLevel: false,
      disableds: true,
      weeklyData: [], //周报数据
      titleType: "",
      level: "", //等级
      centerDialogVisible: false,
      getHistoryListOpen: false,
      // 重新赋值，避免破坏原数据
      dataTypesTemp: this.dataTypes,
      ids: "",
      userIds: "",
      xiuGaiId: "", //修改id
      allBtn: true, //添加维度,删除维度按钮的开关
      addTarget: false, //添加指标弹窗开关
      formLabelWidth: "80px", //label-width
      no_input: true, //限制选项input框禁用字符
      deleteStyle: true, //删除维度按钮显示隐藏
      // 分页属性定义如下{
      pageNum: 1, //当前页
      total: 0, //总条数
      pageSize: 10, //当前页容量
      pageNum1: 1, //当前页
      total1: 0, //总条数
      pageSize1: 10, //当前页容量
      rowsId: "", //当前页容量
      // }
      //表格数据数组
      tableData: [],
      assessTemplateId: "",
      tableColumns: { list: [], header: [] }, //维度数组
      //弹层数组
      ruleForm: {
        type: "",
        name: "", //指标名称
        num: "", //填写数量
        //维度
        dynamicItem: [
          {
            key: "1",
            name: ""
          }
        ]
      },
      //规则校验
      rules: {
        //指标名称校验
        name: [
          { required: true, message: "请输入指标名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ],

        //填写数量校验
        type: [
          { required: true, message: "请选择填写数量", trigger: "change" }
        ],
        //维度校验
        dynamicItem: {
          name: [
            { required: true, message: "请输入维度", trigger: "blur" },
            {
              min: 1,
              max: 30,
              message: "长度在 1 到 30 个字符",
              trigger: "blur"
            }
          ]
        }
      },

      //新增和编辑弹框标题
      dialogStatus: ""
    };
  },
  created() {
    this.getUserIds();
    // this.getViewProgressd(); //获取指标表格数据
  },
  watch: {
    "this.grades"(valnew, valold) {
      console.log(valnew, valold);
    },
    "tableColumns.list"(newVal) {
      const headerSet = new Set();
      newVal?.forEach(column =>
        Object.keys(column).map(item => item !== "file" && headerSet.add(item))
      );
      this.tableColumns.headers = [...headerSet];
      // console.log(this.tableColumns.headers);
    }
  },

  methods: {
    //导出表单
    exportForm() {
      this.$confirm("是否确认导出该文件夹下所有数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const params = {
            assessorId: this.dataTypesTemp.id,
            queryType: 3,
            userId: JSON.parse(sessionStorage.getItem("loginUserinfo")).uid,
            assessorUserId: JSON.parse(sessionStorage.getItem("loginUserinfo")).uid,
          }
          exportForms(params).then(res => {
            console.log(res);
            this.download(res, this.dataTypesTemp.templateName)
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    download(data, name) {
      if (!data) {
        this.$message.error('导出失败！')
        return;
      }
      window.open(data.data.url)
      // let a = document.createElement("a");
      // a.href = data.data.url;
      // a.download = name + ".xlsx";
      // a.style.display = "none";
      // document.body.appendChild(a);
      // a.click();
      // document.body.removeChild(a);

      // let link = document.createElement("a");
      // link.style.display = "none";
      // link.href = data.data.url;
      // link.setAttribute("download", name + ".xlsx");
      // a.target = "_blank";
      // document.body.appendChild(link);
      // link.click();
      this.$message.success('已导出')
    },
    getSon() {
      this.viewProgress22 = false;
      this.getUserIds();
    },
    getSon5() {
      this.viewProgress222 = false;
      this.getUserIds();
    },
    nextPage() {
      this.$emit("giveFather");
    },
    // 查看
    lookEditRow(rows) {
      console.log(rows);
      rows.contentDto.processBeans.forEach(item => {
        item.tupians = false;
      });
      this.personInfo = rows;
      this.viewProgress222 = true;
    },
    // 表格内的点击事件
    editRow(rows) {
      console.log(rows);
      rows.contentDto.processBeans.forEach(item => {
        item.tupians = false;
      });
      this.personInfo = rows;
      this.viewProgress22 = true;
    },
    //获取用户基本信息
    getUserIds() {
      console.log(this.userIds);
      setTimeout(() => {
        getUserId()
          .then(res => {
            console.log(res);
            if (res.code == 0) {
              // this.userIds == res.data.id;
              this.getViewProgressd(res.data.id); //获取表格数据(res.data); //获取表格数据
            } else {
              console.log(error);
            }
          })
          .catch(e => {
            console.log(e);
          });
      }, 500);
      console.log(this.userIds);
    },
    //查看员工周报
    zhouBao(rows) {
      console.log(rows);
      this.rowsId = rows.userId;
      this.titleType = rows.userName;
      this.weekly(); //点击调用查询周报接口
      this.centerDialogVisible = true;
    },
    // 查询周报接口
    async weekly() {
      const params = { userId: this.rowsId };
      const res = await getWeekly(params);
      this.weeklyData = res.data;
      console.log(res);
    },

    //切换每页条数容量
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.getHistoryListOpenListd(this.pageNum1, this.pageSize1);
    },
    //切换当前页
    handleCurrentChange1(val) {
      this.pageNum1 = val;
      this.getHistoryListOpenListd();
    },
    async getHistoryListOpenListd() {
      console.log(this.neiRongList);
      const params = {
        pageNum: this.pageNum1,
        pageSize: this.pageSize1,
        isAsc: "desc",
        recordId: this.xiuGaiId
      };
      const res = await getHistoryListOpenList(params);
      console.log(res);
      if (res.code == 0) {
        this.getHistoryData = res.data;
        this.total1 = res.total;
      }
    },
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getViewProgressd(this.pageNum, this.pageSize);
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      const params = JSON.parse(sessionStorage.getItem("loginUserinfo")).uid;
      this.getViewProgressd(params);
    },
    //获取表格数据
    getViewProgressd(e) {
      console.log(e);
      console.log(this.dataTypesTemp);
      const params = {
        assessorId: this.dataTypesTemp.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        queryType: "3",
        userId: e,
        assessorUserId: e
      };
      getViewProgress(params)
        .then(res1 => {
          console.log(res1);
          this.total = res1.total; //总条数
          res1.data.sort(
            (a, b) =>
              new Date(b.createTime).getTime() -
              new Date(a.createTime).getTime()
          ); //这是升序，倒序的话翻过来
          this.userIds = e;
          this.tableData = res1.data;
          // this.tableData = res1.data.map(item => {
          //   item.processBeans = item.contentDto.processBeans.find(
          //     v => v.state === 1
          //   );
          //   return item;
          // });
          // this.tableData = res1.data.map(item => {
          //   item.processBeans = item.contentDto.processBeans.find(
          //     v => v.state === 1
          //   );
          //   return item;
          // });
        })
        .catch(e => {
          console.log(e);
        });
    }
    //分页逻辑}
  }
};
</script>
    
<style lang="scss" scoped>
/* 共同样式 */
.add_dimension {
  color: blue;
}

.delete_dimension {
  color: red;
}

.add_dimension:hover {
  color: rgb(72, 72, 234);
}

.delete_dimension:hover {
  color: rgb(245, 71, 71);
}

.nextOne {
  margin-top: 25px;
  margin-left: 45%;

  background-color: #0096fe;
}

::v-deep .el-dialog__footer {
  /*width: 0;宽度为0隐藏*/
  text-align: center;
}

// 滚动条样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }

  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}

::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

::v-deep .el-table__body {
  width: 100% !important;
}

::v-deep .el-card__header {
  background-color: rgba(202, 197, 197, 0.3);
}

// ::v-deep .el-textarea__inner {
//   resize: none;
// }
::v-deep .el-input__icon {
  line-height: 24px;
}

::v-deep .el-dialog__header {
  background-color: rgba(204, 204, 204, 0.3);
}
</style>
    